<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>D3.chart examples</title>
		<script src="scripts/lib/d3.v3.js"></script>
		<script src="../d3.chart.js"></script>
		<script src="scripts/datasrc.js"></script>
		<script src="scripts/bar-chart.js"></script>
		<script src="scripts/fading-bar-chart.js"></script>
		<script src="scripts/chord-diagram.js"></script>
		<script src="scripts/improved-chord-diagram.js"></script>
		<script src="scripts/hybrid.js"></script>
		<link rel="stylesheet" href="styles/index.css"></link>
	</head>
	<body>

		<img src="images/logo.png" />
		<p>Miso is an open source toolkit designed to expedite the creation of high-quality interactive storytelling and data visualisation content. <a href="http://misoproject.com/">Learn more.</a></p>

		<h2>D3.Chart Examples</h2>

		<!-- quick anchor menu -->
		<ol>
			<li><a href="#miso_bar_chart">Reusable Bar Chart</a></li>
			<li><a href="#miso_circle_chart">Extending a Chart</a></li>
			<li><a href="#bar_chart">Bar Chart</a></li>
			<li><a href="#custom_bar_chart">Custom Bar Chart</a></li>
			<li><a href="#fading_bar_chart">Fading Bar Chart</a></li>
			<li><a href="#chord_diagram">Chord Diagram</a></li>
			<li><a href="#custom_chord_diagram">Custom Chord Diagram</a></li>
			<li><a href="#improved_chord_diagram">Improved Chord Diagram</a></li>
			<li><a href="#hybrid_chart">Hybrid</a></li>
		</ol>

		<!-- examples -->
		<ol>
			<li>
				<a name="miso_bar_chart">Reusable Bar Chart</a>
				<div class="description">

					<p>In this <a href="http://misoproject.com/d3-chart/examples/basic.html">example</a> we create a basic circle chart and then extend it to add labels above the circles showing their exact value.
					</p>
				</div>
			</li>
			<hr />

			<li>
				<a name="miso_circle_chart">Extending a Chart</a>
				<div class="description">

					<p>In this <a href="http://misoproject.com/d3-chart/examples/extending.html">example</a> we create a basic circle chart and then extend it to add labels above the circles showing their exact value.</p>

				</div>
			</li>
			<hr />

			<li>
				<a name="bar_chart">Bar Chart</a>
				<div id="barChart"></div>
			</li>
			<hr />

			<li>
				<a name="custom_bar_chart">Custom Bar Chart</a>
				<div id="barChartCustom"></div>
			</li>
			<hr />


			<li>
				<a name="fading_bar_chart">Fading Bar Chart ( more modular code base )</a>
				<div id="barChartFading"></div>
			</li>
			<hr />


			<li>
				<a name="chord_diagram">Chord Diagram</a>
				<div id="chordDiagram"></div>
			</li>
			<hr />


			<li>
				<a name="custom_chord_diagram">Custom Chord Diagram</a>
				<div id="chordDiagramCustom"></div>
			</li>
			<hr />


			<li>
				<a name="improved_chord_diagram">Improved Chord Diagrams</a>
				<div id="chordDiagramImproved"></div>
			</li>
			<hr />


			<li>
				<a name="hybrid_chart">Hybrid</a>
				<div id="hybrid"></div>
			</li>
			<hr />

		</ol>

		<script src="scripts/app.js"></script>

	</body>
</html>
